<template>
	<view class="pagesList pagesPadding">
		<searchBox v-if='isHidden!=1' :currentCode='currentCode' @showDailog="showDailog" @closeDailog="closeDailog"
			@handleSearch='handleSearch'></searchBox>
		<view class="listContent">
			<view class="newsCard" v-if="newsList&&newsList.length>0">
				<!-- 	<scroll-view :style="{height:contentheightData}" scroll-y="true" :refresher-enabled="false"
					:refresher-threshold="100" @scrolltolower='getReachBottom' @scroll="onScroll"> -->
				<view class="cardItemContainers">
					<view class="cont-box"
						:style="{ '--layout-width': 100 / flowData.column - flowData.columnSpace + '%' }"
						v-for="(numVal, index) in flowData.column" :key="numVal">
						<view class="cardItem" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j"
							:class="item.form==1?'active':''">
							<a class="" v-if="item.articleFormat==1" :href="item.hyperlinkUrl">
								<!-- #ifdef H5 -->
								<easy-loadimage mode="widthFix" v-if="item.type===0" class="cardItem_img"
									:scroll-top="scrollTop"
									:image-src="item.articleImages?item.articleImages:kpImg"></easy-loadimage>
								<!-- #endif -->
								<!-- #ifdef MP -->
								<view class="cardItem_img"
									:style="{backgroundImage: 'url(' + item.articleImages?item.articleImages:kpImg + ')', backgroundSize: '100% 100%'}">

								</view>
								<!-- #endif -->
								<video v-if="item.type===1"
									style="width:100%;min-height:200rpx; border-radius: 0rpx;object-fit: contain;"
									controls :src="item.videoUrl" :show-fullscreen-btn='false'></video>
								<view class="cardItemRight">
									<view class="rightTop">
										{{item.title}}
									</view>
									<view class="rightBottom">
										<view class="time">
											{{item.createTime}}
										</view>

									</view>
								</view>
							</a>
							<view class="" v-else @click="goNewsDetail(item)">

								<!-- #ifdef H5 -->
								<easy-loadimage mode="widthFix" v-if="item.type===0" class="cardItem_img"
									:scroll-top="scrollTop"
									:image-src="item.articleImages?item.articleImages:kpImg"></easy-loadimage>
								<!-- #endif -->
								<!-- #ifdef MP -->
								<view class="cardItem_img"
									:style="{backgroundImage: 'url(' + item.articleImages?item.articleImages:kpImg + ')', backgroundSize: '100% 100%'}">

								</view>
								<!-- #endif -->
								<video v-if="item.type===1"
									style="width:100%;min-height:200rpx; border-radius: 0rpx;object-fit: contain;"
									controls :src="item.videoUrl" :show-fullscreen-btn='false'></video>
								<view class="cardItemRight">
									<view class="rightTop">
										{{item.title}}
									</view>
									<view class="rightBottom">
										<view class="time">
											{{item.createTime}}
										</view>

									</view>
								</view>
							</view>

						</view>

					</view>
				</view>

				<u-loadmore :status="status" />
				<!-- </scroll-view> -->

			</view>
			<pagesNoData v-else></pagesNoData>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		findAllArticleManagement
	} from '@/api/platform/ArticleManagement.js'
	import {
		getDicts
	} from '@/api/platform/dicts.js'

	export default {
		name: "pagesNews",
		computed: {
			...mapState({
				logInType: state => state.user.logInType, //1医生  2个人  普通
			}),
		},
		props: ['currentCode', 'isHidden'], // isHidden 1:隐藏(从专题活动进来)
		data() {
			return {
				scrollTop: 0,
				contentheightData: 'calc(100vh - 658rpx)',
				flowData: {
					list: [], // 数据值
					column: 2, // 瀑布列数
					columnSpace: 2 // 瀑布列宽间距
				},
				showNum: 0,
				newsList: [],
				status: 'loadmore',
				total: 0,
				filterForm: {
					page: 0,
					size: 10,
					state: 1, //已发布
					title: '',
					articleColumnName: '',
					displayLocation: '',
					type: '',
					subspecialty:'',
				},
				kpImg: '/static/images/index/kpImg.jpg'

			};
		},
		mounted() {
			// #ifdef H5
			// if (this.$wx.isWechat()) { // true  微信环境(有导航栏标题)  false  非微信环境(无导航栏标题)
			// 	this.contentheightData = 'calc(100vh - 658rpx - 90rpx)' //(131+118+80)*2   90rpx(专栏高度) 
			// } else {
			// 	this.contentheightData = 'calc(100vh - 746rpx - 90rpx)' //(131+118+80+44)*2    90rpx(专栏高度)
			// }
			// #endif
			if (this.logInType == 1) {
				this.contentheightData = 'calc(100vh - 528rpx)'
			} else {
				this.contentheightData = 'calc(100vh - 658rpx - 90rpx)'
			}
			if (this.isHidden == 1) {
				this.subspecialtyRequest()
			} else {
				this.findAllArticleManagement()
			}
		},

		// onReachBottom() {

		// },
		created() {
			/* 初始化每一列的数据 */
			for (let i = 1; i <= this.flowData.column; i++) {
				this.$set(this.flowData, `column_${i}`, []);
			}
		},
		methods: {
			showDailog() {
				this.$emit('showDailog')
			},
			closeDailog() {
				this.$emit('closeDailog')
			},
			handleSearch(data) {
				console.log('handleSearch---data', data)
				this.newsList = []
				this.filterForm = data
				this.filterForm.state = 1
				this.findAllArticleManagement()
			},
			onScroll(e) {
				// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
				this.scrollTop = e.scrollTop;
				// console.log('onScroll--',e)
			},
			imgerror(aitem) { //加载失败显示默认图
				console.log("9999.articleImages")

				aitem.articleImages = '/static/images/index/noData.png';
			},
			/* 数据初始化 */
			initData() {
				const groupList = this.dynamicGrouping(this.flowData.list, this.flowData.column); // 数据动态分组
				groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] = item));
			},
			/** 数据动态分组
			 * @param {Object} data 分组的数据列表
			 * @param {Object} i 需要分几组
			 * @returns {Array} groups 已分组的数据
			 */
			dynamicGrouping(data, i) {
				if (i <= 0) return "分组数必须大于0";
				const groups = [];
				for (let j = 0; j < i; j++) {
					groups.push([]);
				}
				for (let k = 0; k < data.length; k++) {
					const groupIndex = k % i;
					groups[groupIndex].push(data[k]);
				}
				return groups;
			},
			getReachBottom() {
				console.log("888" + this.filterForm.page)
				let that = this;
				this.status = 'loading';
				this.filterForm.page = ++this.filterForm.page;
				setTimeout(() => {
					if (this.newsList.length < this.total) {
						this.status = 'loadmore'
						that.findAllArticleManagement()
					} else {
						this.status = 'nomore'
					}
				}, 600)
			},
			selectAction(e) {
				console.log('e====>', e)
				this.filterForm.articleColumnName = e.name
				this.filterForm.page = 0
				this.filterForm.size = 10
				this.newsList = []
				this.findAllArticleManagement()

			},
			subspecialtyRequest() {
				let data = {
					page: 0,
					size: 999,
					code: "subspecialty"
				}
				getDicts(data).then(res => {
					if (res.code == 200) {
						let data = res.data
						let obj = data.find(item => {
							return item.name.includes('乳腺')
						})
						if (obj) {
							this.filterForm.subspecialty = obj.id
							this.findAllArticleManagement()
						}

					}
				})
			},
			findAllArticleManagement() {
				findAllArticleManagement(this.filterForm).then(res => {
					if (res.code == 200) {
						this.total = res.rows.totalElements
						let newsList = res.rows.content
						this.newsList.push(...newsList)
						this.flowData.list = this.newsList
						if (this.newsList.length < this.total) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}

					} else {
						this.newsList = []
						this.flowData.list = this.newsList
						this.status = 'nomore'
					}
					this.initData(); // 数据初始化
				})
			},
			goNewsDetail(item) {
				this.$store.commit('setDetailObj', item)
				console.log('goNewsDetail', item)
				uni.navigateTo({
					url: '/subPackages/news/detail/detail'
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagesList {
		.formBox {
			height: 90rpx;
		}

		.listContent {
			.newsCard {
				.cardItemContainers:after {
					content: '';
					display: table;
					clear: both;
				}

				.cardItemContainers {
					display: flex;
					justify-content: space-between;
					// padding: 20rpx;
					$borderRadius: 12rpx;

				}

				.cont-box {
					width: var(--layout-width);
				}

				.cardItem {
					width: 100%;
					border-radius: 8rpx;
					overflow: hidden;
					box-shadow: 0px 4rpx 8rpx 4rpx rgba(56, 152, 255, 0.5) !important;
					margin: 10rpx 8rpx;
					box-sizing: border-box;

					a {
						text-decoration: none;
					}

					.cardItem_img {
						width: 100%;
						height: 100%;
						display: block;

						::v-deep .loadfail-img {
							//mode为widthFix即图片高度自适应时要设置占位图默认高度
							height: 300rpx;
						}
					}

					.cardItemRight {
						padding: 12rpx 24rpx;

						.rightTop {
							font-size: 28rpx;
							line-height: 40rpx;
							color: #3D3D3D;
							font-weight: bold;
							overflow: hidden; //隐藏溢出
							text-overflow: ellipsis; //省略号
							display: -webkit-box; //-webkit-box是兼容IOS和老版本Android浏览器的方式
							-webkit-line-clamp: 3; //限制行数
							-webkit-box-orient: vertical; //垂直方向排列
						}

						.rightBottom {
							.time {
								font-size: 24rpx;
								line-height: 40rpx;
								color: #949494;
							}

							.look {
								font-size: 24rpx;
								line-height: 40rpx;
								color: #007BFF;
							}
						}
					}
				}

			}
		}
	}
</style>